<template>
    <div class="page">
        <el-card shadow="never" class="mt-4">
            <div class="mt-4" v-loading="loading">
                <el-table :data="data">
                    <el-table-column label="员工姓名" prop="name"/>
                    <el-table-column label="开通勋章课个数" prop="num"/>
                    <el-table-column label="拥有兑换码数量" prop="code_num"/>
                    <el-table-column label="最后一次登录时间">
                        <template slot-scope="{row}">
                            {{ row.last_login_at | formatTime }}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="{row}">
                            <el-button type="text" @click="onDetail(row)">查看详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div v-if="totalElements > 0" class="footer mt-4 text-center">
                <el-pagination
                    class="center"
                    @size-change="fetchData"
                    @current-change="fetchData"
                    :current-page.sync="form.page"
                    :page-size.sync="form.size"
                    :page-sizes="[10, 25, 50]"
                    layout="total, prev, pager, next, sizes, jumper"
                    :total="totalElements">
                </el-pagination>
            </div>
        </el-card>
    </div>
</template>

<script>

export default {
    components: {
    },
    mixins: [require('@/mixins/CacheQuery').default],
    data() {
        return {
            loading: false,
            data: [1],
            form: {
                page: 1,
                size: 25,
                keyword: '',
            },
            totalElements: 0,
        };
    },
    computed: {
        my() {
            return this.$store.state.my;
        },
    },
    methods: {
        fetchData() {
            this.loading = true;
            API.get('user/merit-course-statistics', { params: this.form }).then((res) => {
                this.data = res.content;
                this.totalElements = res.pagination.total;
            }).finally(() => this.loading = false);
        },
        onDetail(e) {
            const params = e ? { id: e.user_id } : undefined;
            const name = this.my.company_id ? 'MedalStatisticsManage.Detail.Company' : 'MedalStatisticsManage.Detail';
            this.$router.push({
                name,
                params,
            });
        },
    },
    mounted() {
        this.fetchData();
    },
};
</script>

<style lang="scss" scoped>
.page {
    .input-width {
        max-width: 300px;
    }
}
</style>
